﻿<template>
	<div class="card-fill layout-padding">
		<WtmSearcher v-if="searchBar" v-model="searchData" @search="getTableData">
			<el-row :gutter="15">
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
					<el-form-item ref="Phone_FormItem" prop="Phone" label="手机号码">
						<el-input v-model="searchData.Phone" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
					<el-form-item ref="Context_FormItem" prop="Context" label="推送内容">
						<el-input v-model="searchData.Context" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
					<el-form-item ref="State_FormItem" prop="State" label="推送结果">
						<el-select v-model="searchData.State" clearable>
							<el-option key="创建" value="创建" label="创建"></el-option>
							<el-option key="成功" value="成功" label="成功"></el-option>
							<el-option key="失败" value="失败" label="失败"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
					<el-form-item ref="Message_FormItem" prop="Message" label="错误消息">
						<el-input v-model="searchData.Message" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
					<el-form-item ref="SmsTime_FormItem" prop="SmsTime" label="短信时间">
						<el-date-picker type="daterange" v-model="searchData.SmsTime" clearable></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
		</WtmSearcher>

		<WtmTable ref="tableRef" v-bind="tableData" class="table-operation-area">
			<template #operation>
				<el-table-column :label="$t('message._system.common.vm.operate')" min-width="180" align="center" class-name="operation-column">
					<template v-slot="scope">
						<div class="operation-container">
							<el-button
								text
								type="primary"
								@click="OnDetailsRowClick(scope.row)"
								v-auth="'/api/SysSmsAuthLog/{id}'"
								class="operation-btn"
								size="small"
								>{{ $t('message._system.common.vm.detail') }}
							</el-button>
						</div>
					</template>
				</el-table-column>
			</template>
		</WtmTable>
	</div>
</template>

<script setup lang="ts" name="短信记录;true;HengTong.Areas._Admin.Controllers;SysSmsAuthLog">
import { defineAsyncComponent, ref, getCurrentInstance, onMounted } from 'vue';
import { SysSmsAuthLogApi as api } from '/@/views/_admin/syssmsauthlog/api';
import { ISysSmsAuthLogView, ISysSmsAuthLogQuery } from '/@/views/_admin/syssmsauthlog/api/interface';
import other from '/@/utils/other';

const ci = getCurrentInstance() as any;
const DetailsDialog = defineAsyncComponent(() => import('./details.vue'));

const props = withDefaults(
	defineProps<{
		/** 是否显示搜索(筛选)栏 */
		searchBar?: boolean;
		/** 是否显示工具栏 */
		toolbar?: boolean;
		/** 是否禁用表格任何操作 */
		isDisabled?: boolean;
		/** 默认筛选 */
		filters?: ISysSmsAuthLogQuery;
	}>(),
	{
		searchBar: true,
		toolbar: true,
		isDisabled: true,
		filters: () => ({}),
	}
);

const searchData = ref<ISysSmsAuthLogQuery>({});

// 定义变量内容
const tableRef = ref();
const tableData = ref({
	// 列表数据（必传）
	data: [],
	// 表头内容（必传，注意格式）
	header: [
		{ title: '手机号码', key: 'Phone', type: 'text', isCheck: true },
		{ title: '推送内容', key: 'Context', type: 'text', isCheck: true },
		{ title: '推送结果', key: 'State', type: 'text', isCheck: true },
		{ title: '错误消息', key: 'Message', type: 'text', isCheck: true },
		{ title: '短信时间', key: 'SmsTime', type: 'text', isCheck: true },
	],
	// 配置项（必传）
	config: {
		total: 0, // 列表总数
		loading: true, // loading 加载
		isSerialNo: true, // 是否显示表格序号
		isSelection: true, // 是否显示表格多选
		isOperate: props.isDisabled, // 是否显示表格操作栏
	},
});
// 初始化表格数据
const getTableData = () => {
	tableRef.value.doSearch(api().search, searchData.value).catch((error: any) => {
		other.setFormError(ci, error);
	});
};

const OnDetailsRowClick = (row: ISysSmsAuthLogView) => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.detail'), DetailsDialog, row, getTableData);
};

// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
